<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>路由 -  单页开发，切换的是组件</title>
</head>
<body>
<div id="app">
  <router-link to="/home" tag="button">首页</router-link>
  <router-link to="/list">列表</router-link>
  <router-view>

  </router-view>
</div>

</body>
<script src="../../node_modules/vue/dist/vue.js"></script>
<script src="../../node_modules/vue-router/dist/vue-router.js"></script>
<script>
  let home = {
    template:`<div>首页</div>`
  };

  let list = {
    template:`<div>列表页</div>`
  };

  let routes = [  //路由的映射表，配置路由和组件的关系
    {path:'/home',component:home}, //配置的关系就是页面级的组件
    {path:'/list',component:list}
  ]

  let router = new VueRouter({  //引入vue-router 自带vueRouter类
      // mode:'history',
      routes  //名字和值一样，只写一个
  });

  let vm = new Vue({
    el: '#app',
    data: {
    },
    router,

  })

</script>
</html>
